<!--
 * @Autor: Gct
 * @Description: 首页页面
 * @Date: 2022-04-02 16:08:21
 * @LastEditors: Gct
 * @LastEditTime: 2022-04-19 12:25:57
-->
<template>
  <div>
    <!-- 第一行开始 -->
    <el-row :gutter="20" style="display: flex">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="card-one">
            <div slot="header" class="clearfix">
              <span style="margin: 0 14px">访问量</span>
            </div>
            <div style="font-size: 30px; margin: 0 14px">25,848</div>
            <div style="margin: 14px; height: 20px">日同比 12.5% 周同比 5%</div>
            <el-divider></el-divider>
            <div style="float: left; margin: 14px">总访问量</div>
            <div style="float: right; margin: 14px">280万</div>
          </el-card>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="card-two">
            <div slot="header" class="clearfix">
              <span style="margin: 0 14px">销售额</span>
            </div>
            <div style="font-size: 30px; margin: 0 14px">￥12,848</div>
            <div style="margin: 14px; height: 20px">
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                :percentage="70"
              ></el-progress>
            </div>
            <el-divider></el-divider>
            <div style="float: left; margin: 14px">总销售额</div>
            <div style="float: right; margin: 14px">80万</div>
          </el-card>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="card-three">
            <div slot="header" class="clearfix">
              <span style="margin: 0 14px">订单量</span>
            </div>
            <div style="font-size: 30px; margin: 0 14px">25,848</div>
            <div ref="box" style="height: 34px"></div>
            <el-divider></el-divider>
            <div style="float: left; margin: 14px">转化率</div>
            <div style="float: right; margin: 14px">60%</div>
          </el-card>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="card-four">
            <div slot="header" class="clearfix">
              <span style="margin: 0 14px">用户</span>
            </div>
            <div style="font-size: 30px; margin: 0 14px">128位</div>
            <div style="margin: 14px; height: 20px">日同比 62.3% 周同比 7%</div>
            <el-divider></el-divider>
            <div style="float: left; margin: 14px">总用户数</div>
            <div style="float: right; margin: 14px">10086人</div>
          </el-card>
        </div></el-col
      >
    </el-row>
    <!-- 第一行结束 -->
    <!-- 第二行开始 -->
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="3"><el-button type="primary" icon="el-icon-edit"></el-button></el-col>
      <el-col :span="3"><el-button type="primary" icon="el-icon-edit"></el-button></el-col>
      <el-col :span="3"><el-button type="primary" icon="el-icon-edit"></el-button></el-col>
      <el-col :span="3"><el-button type="primary" icon="el-icon-edit"></el-button></el-col>
      <el-col :span="3"><el-button type="primary" icon="el-icon-edit"></el-button></el-col>
      <el-col :span="3"><el-button type="primary" icon="el-icon-edit"></el-button></el-col>
      <el-col :span="3"><el-button type="primary" icon="el-icon-edit"></el-button></el-col>
      <el-col :span="3"><el-button type="primary" icon="el-icon-edit"></el-button></el-col>
    </el-row>
    <!-- 第二行结束 -->
  </div>
</template>
<script>
import { TinyArea } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    loadTinyArea() {
      let tinyArea = new TinyArea(this.$refs["box"], {
        data: [
          264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467,
          513, 546, 983, 340, 539, 243, 226, 192,
        ],
        smooth: true,
        areaStyle: {
          fill: "#d6e3fd",
        },
      });
      // 4.渲染图表
      tinyArea.render();
    },
  },
  created() {},
  mounted() {
    this.loadTinyArea();
  },
};
</script>
<style lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>